<template>
  <div class="bin-site-table">
    <div class="details-title">{{ title }}</div>
    <dynTable
      ref="dynTable"
      :loading="tableLoading"
      :table-data="tableData"
      :table-columns="tableColumns"
    />
    <pagination
      :total="total"
      :page.sync="listQuery.page"
      :size.sync="listQuery.size"
      :pager-count="5"
      layout="total, prev, pager, next"
      @pagination="handleCurrentChange"
    />
  </div>
</template>

<script>
import summaryApi from '@/api/production/summaryReview'
export default {
  name: 'BinSiteTable',
  props: {
    title: {
      type: String,
      default: ''
    },
    listInfos: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      tableData: [],
      tableLoading: false,
      siteTableColumns: [
        { prop: 'binNo', label: 'BIN_NO' },
        { prop: 'binItem', label: 'BIN_NAME' },
        { prop: 'binType', label: 'BIN_TYPE' },
        { prop: 'binQty', label: 'BIN_QTY' }
      ],
      tableColumns: [
        { prop: '', label: '', type: 'expand', templete: (_scope) => {
          if (_scope.row.siteBins.length) {
            return (
              <dynTable
                ref='dynTable'
                loading={false}
                table-data={_scope.row.siteBins}
                table-columns={this.siteTableColumns}
              />
            )
          } else {
            return []
          }
        } },
        { prop: '', label: this.listInfos.IsHardBin ? 'Handware Bin Site' : 'Software Bin Site',
          templete: (_scope) => {
            return (
              <span>{this.listInfos.IsHardBin ? '【Handware Bin】Site' : '【Software Bin】Site'} {(this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
            )
          } }
      ],
      total: 0,
      listQuery: {
        page: 1, size: 10
      }
    }
  },
  created() {
    this.getSummarySitesList()
  },
  methods: {
    async getSummarySitesList() {
      const res = await summaryApi.getSummarySitesList(
        { ...this.listQuery, ...this.listInfos })
      this.tableData = res.data.siteInfos
      this.total = res.total || 0
    },
    handleCurrentChange(page) {
      this.listQuery = page
      this.getSummarySitesList()
    }
  }
}
</script>

<style scoped lang="scss">
.bin-site-table {
  margin-bottom: 20px;
 .details-title {
    width: 100%;
    height: 40px;
    background: #add7ff;
    color: #1a70c1;
    line-height: 40px;
    text-align: left;
    font-weight: 700;
    font-size: 16px;
    box-sizing: border-box;
    padding-left: 10px;
  }
}
  ::v-deep .el-table__expanded-cell{
    padding: 10px;
  }
</style>
